import React, {Component} from 'react'
import {
  View,
  Text,
  TouchableOpacity,
  Platform,
  StyleSheet,
  ActivityIndicator,
  Image,
  Dimensions,
  RefreshControl,
  ScrollView,
  FlatList,
} from 'react-native'
import {Actions} from "react-native-router-flux";
import {ListRow, Toast} from 'teaset'
import * as String from './../../utils/srting'
import font from './../../styles/font'
import Toast2, {
  DURATION
} from 'react-native-easy-toast'
import colors from "../../styles/colors";
import { SafeAreaView } from 'react-navigation';

const {
  height: deviceHeight,
  width: deviceWidth
} = Dimensions.get("window");

class UserCollectScene extends Component{
  constructor(props){
    super(props)
    this.state = {
      dataSource: [],
      jifen: '',
      isRefreshing: false
    }
  }

  componentDidMount() {
    this.props.actions.userCollect()
  }

  componentWillReceiveProps(nextProps) {
    const {
      userCollect,
      delUserCollect
    } = nextProps;

    if(nextProps.refresh && userCollect.isLoading === false){
      Actions.refresh({
        refresh: false
      });
      this.props.actions.userCollect()
    }


    if(this.props.userCollect !== userCollect){
      this.setState({isRefreshing: false});
      if (userCollect.error !== false) {
        if (userCollect.error.status === 401) {

          if(global.isWXAppInstalled){
            Actions.login()
            return;
          }
        }
        this.toast.show(userCollect.error.message)
      }else{
        if(userCollect.data && !userCollect.isLoading){
          this._setRows(userCollect.data);
          this.setState({
            dataSource: this._getRows(),
          });
        }
      }
    }


    if(this.props.delUserCollect !== delUserCollect){
      if (delUserCollect.error !== false) {
        if (delUserCollect.error.status === 401) {
          Actions.login()
          return;
        }
        this.toast.show(delUserCollect.error.message)
      }else{
        if(delUserCollect.data && !delUserCollect.isLoading){
          Toast.success(delUserCollect.data)
          this.props.actions.userCollect()
        }
      }
    }


  }


  _setRows(rows) {
    this._rows = rows;
  }
  _getRows() {
    return this._rows ? this._rows : [];
  }

  _onRefresh(){
    this.setState({isRefreshing: true});
    this.props.actions.userCollect()
  }


  renderRow(userCollect){
    return(
      <ListRow
        topSeparator = 'full'
        bottomSeparator = 'full'
        onPress={()=>{ Actions.taoBaoWeb({...userCollect.item})}}
        title={<Image style={styles.itemImg} source={{uri:userCollect.item.pictUrl}}/>}
        detail={
          <View style={styles.content}>
            <Text style={font.black18} numberOfLines={1}>{userCollect.item.title}</Text>
            <Text style={styles.itemText}>券<Text style={styles.itemText2}>{userCollect.item.couponAmount}</Text>元
              <Text style={styles.itemText}>现价<Text style={styles.itemText2}>￥{userCollect.item.zkPrice} </Text>
                <Text style={styles.itemText}>月销<Text style={styles.itemText2}>{userCollect.item.biz30day} </Text>
                  件
                </Text>
              </Text>
            </Text>
          </View>
        }
        swipeActions={[
          <ListRow.SwipeActionButton title='取消收藏' onPress={() => {
            this.props.actions.delUserCollect(userCollect.item.id)
          }}/>,
        ]}
      />
    )
  }


  render(){
    const { error, data, isLoading} = this.props.userCollect
    if(error && error.status === 401){

      if(global.isWXAppInstalled){
      // if(true){
        return(
          <View style={{flex:1, justifyContent:'center', alignItems:'center', backgroundColor:'#fff'}}>
            <TouchableOpacity onPress={()=>{Actions.login()}}>
              <Text style={{color:'#000', fontSize:16}}>立即登录</Text>
            </TouchableOpacity>
          </View>
        )
      }else{
        return(
          <View style={{flex:1, justifyContent:'center', alignItems:'center', backgroundColor:'#fff'}}>
            <Text style={{color:'#000', fontSize:16}}>暂无收藏记录</Text>
          </View>
        )
      }

    }else{
      return(
        <SafeAreaView style={styles.container}>
          <FlatList
            data={this.state.dataSource}
            renderItem={this.renderRow.bind(this)}
            style={{marginTop: Platform.OS === 'ios' ? 20 : 0}}
            ListEmptyComponent={()=>{
              return(
                <View style={{height:200, justifyContent:'center', alignItems:'center', backgroundColor:'#fff'}}>
                  <Text style={{color:'#000', fontSize:16}}>暂无收藏记录</Text>
                </View>
              )
            }}
            refreshing={this.state.isRefreshing}
            onRefresh={this._onRefresh.bind(this)}
          />
          <Toast2
            ref={view => this.toast = view}
            style={{backgroundColor:'red'}}
            opacity={0.6}
            position='top'/>
        </SafeAreaView>
      )
    }

  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:'#fff',
  },
  title:{
    height:40,
    flexDirection:'row',
    marginLeft:10,
    marginBottom:10,
    alignItems:'center',
    backgroundColor:'#fff',
  },
  itemContainer:{
    borderTopColor:'#f6f6f6',
    borderTopWidth:0.5,
    flexDirection:'row',
  },
  itemImg:{
    width:60,
    height:60,
    margin:10
  },
  content:{
    flex:1,
    paddingVertical:5,
    justifyContent:'center',
  },
  itemText:{
    color:'#999',
    fontSize:14,
  },
  itemText2:{
    color:'#f00',
    fontSize:14,
  }
})


export const LayoutComponent = UserCollectScene

export function mapStateToProps(state, props) {
  return {
    routes: state.routes,
    userCollect: state.userCollectReducer,
    delUserCollect: state.delUserCollectReducer
  }
}